<!-- 库存信息 / 工资信息 / 银行流水 -->
<template>
<section class="inventory-info common-text-block-section">
    <div class="title-section">
        <div class="title">
            工资 & 人员信息
        </div>
    </div>
    <div class="text-section upload-info-section">
        <div class="tip-info">
            <div>
                说明与提示:
            </div>
            <div>
                1. 正常情况下，客户将收到推送，可在【代税宝】小程序完成上传工作；
            </div>
            <div>
                2. 若客户长时间不上传，则代账公司可通过下列【上传】按钮完成上传；
            </div>
            <div>
                3. 银行流水信息为必须项，其余两项可不上传。
            </div>
        </div>
        <div v-if="uploadInfo" class="form">
            <!-- <div class="single-line">
                <label class="iconfont icon-inventory">库存信息:</label>
                <span :class="{uploaded: uploadInfo.inventory}">
                    {{uploadInfo.inventory ? '已录入' : '未录入' }}
                </span>
                <el-input v-if="!uploadInfo.inventory" size="mini" placeholder="请输入出库金额" v-model="inventory"></el-input>
            </div> -->
            <div class="single-line">
                <label class="iconfont icon-salary">工资信息:</label>
                <span :class="{uploaded: uploadInfo.salary}">
                    {{uploadInfo.salary ? '已上传' : '未上传' }}
                </span>
                <el-upload
                    v-if="!uploadInfo.salary"
                    class="salary-upload-btn"
                    action="SALARY"
                    :data="{key: 'salaryFileId'}"
                    :http-request="uploadFile"
                    :limit="1"
                    :on-exceed="onExceed"
                    :on-remove="removeSalaryFile">
                    <el-button size="mini" type="primary" :disabled="salaryDisable">上传【工资信息】Excel</el-button>
                    <el-button  v-if="!uploadInfo.salary" size="mini" type="primary" @click.stop="sameAsLastMonth('salary')">和上月一样</el-button>
                    <el-button  v-if="!uploadInfo.salary" size="mini" type="primary" @click.stop="notUpload('salary')">无需上传</el-button>

                    <!-- <div slot="tip" class="el-upload__tip">只能上传 xls/xlsx 文件，且不超过500kb</div> -->
                </el-upload>

            </div>
                <div class="single-line">
                <label class="iconfont icon-salary">人员信息:</label>
                <span :class="{uploaded: uploadInfo.staff}">
                    {{uploadInfo.staff ? '已上传' : '未上传' }}
                </span>
                <el-upload
                    v-if="!uploadInfo.staff"
                    class="salary-upload-btn"
                    action="STAFF"
                    :data="{key: 'staffFileId'}"
                    :http-request="uploadFile"
                    :limit="1"
                    :on-exceed="onExceed"
                    :on-remove="removeStaffFile">
                    <el-button size="mini" type="primary" :disabled="staffDisable">上传【人员信息】Excel</el-button>
                    <el-button v-if="!uploadInfo.staff" size="mini" type="primary" @click="sameAsLastMonth('staff')">和上月一样</el-button>
                    <el-button v-if="!uploadInfo.staff" size="mini" type="primary" @click="notUpload('staff')">无需上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传 xls/xlsx 文件，且不超过500kb</div> -->
                </el-upload>

            </div>
            <div v-if="fatherType == 0" class="single-line">
                <label class="iconfont icon-bank">银行流水:</label>
                <span class="bank" :class="{uploaded: uploadInfo.bank}">
                    {{uploadInfo.bank ? '已上传' : '未上传' }}
                </span>
                <!-- <el-button size="mini" type="primary">点击上传</el-button> -->
                <bankStatementUpload v-if="!uploadInfo.bank" ref="bankStatementUpload" :accountBillData="accountBillData"/>
            </div>
        </div>
    </div>
</section>
</template>

<script>
/**
 * @file 库存信息 / 工资信息 / 银行流水
 */
import 'element-ui/lib/theme-chalk/upload.css';
import bankStatementUpload from '@/components/bankStatementUpload';
import {getFileType} from "@/components/map";

export default {
    props: {
        accountBillData: {
            type: Object,
            default: null
        },
        uploadInfo: {
            type: Object,
            default: null
        },
        fatherType: {
            type: Number,
            default: 0
        }
    },
    components: {
        bankStatementUpload
    },
    data() {
        return {
            inventory: '',
            salaryFileId: '',
            salaryType: 0,
            staffFileId: '',
            staffType: 0,
            salaryDisable: false,
            staffDisable: false,
        };
    },
    methods: {

        /**
         * 超出最大上传数
         */
        onExceed() {
            this.$message.error('工资信息文件已上传，如需更新请删除后再重新上传');
        },

        /**
         * 上传文件
         *
         * @param {Object} fileData 文件数据
         */
        uploadFile(fileData) {
            const formData = new FormData();
            // 键值
            formData.append('file', fileData.file);
            formData.append('cName', this.accountBillData.companyName);
            formData.append('fileType', getFileType(fileData.action));
            formData.append('fileName', fileData.file.name);
            this.$http.post(
                "/upload/file",
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(res => {
                switch(fileData.data.key){
                    case 'salaryFileId': 
                        this.salaryFileId = res.data.fileId;
                        this.salaryFinished = true;
                        break;
                    case 'staffFileId':
                        this.staffFileId = res.data.fileId;
                        break;
                    default:
                        throw "fileKey not exists"
                }
            }).catch(err => {
                console.error(err);
            });
        },

        // uploadStaffFile(fileData) {
        //     const formData = new FormData();
        //     // 键值
        //     formData.append('file', fileData.file);

        //     this.$http.post(
        //         fileData.action,
        //         formData,
        //         {
        //             headers: {
        //                 'Content-Type': 'multipart/form-data'
        //             }
        //         }
        //     ).then(res => {
        //         if (fileData.data.key === 'staffFileId') {
        //             this.staffFileId = res.data.fileId;

        //         }
        //     }).catch(err => {
        //         console.error(err);
        //     });
        // },

        /**
         * 移除
         */
        removeSalaryFile() {
            this.salaryFileId = '';
        },

        removeStaffFile() {
            this.staffFileId = '';
        },

        sameAsLastMonth(type){
            if(type == 'salary'){
                this.salaryType = 1;
                this.salaryDisable = true;
            }
            if(type == 'staff'){
                this.staffType = 1;
                this.staffDisable = true;
            }
        },
        notUpload(type){
            if(type == 'salary'){
                this.salaryType = 2;
                this.salaryDisable = true;
            }
            if(type == 'staff'){
                this.staffType = 2;
                this.staffDisable = true;
            }
        },

        noNeedToUpload(type){
            if(type == 'salary'){
                this.salaryType = 2;
                this.salaryDisable = true;
            } 
            if(type == 'staff'){
                this.staffType = 2;
                this.staffDisable = true;
            }
        },



        /**
         * 获取数据
         */
        getValue() {
            let bankStatementFileIds = [];
            if (this.fatherType == 0){
                if (this.$refs.bankStatementUpload) {
                    bankStatementFileIds = this.$refs.bankStatementUpload.getValue();
                }
            }
            return {
                // inventory: this.inventory,
                salaryFileId: this.salaryFileId,
                salaryType: this.salaryType,
                staffFileId: this.staffFileId,
                staffType: this.staffType,
                bankStatementFileIds
            };
        }
    }
}
</script>
<style lang="less">
@import '../../../assets/var.less';
.inventory-info {
    .iconfont::before {
        color: @color-grey-low;
    }
    .upload-info-section {
        .tip-info {
            margin: 0;
            padding-bottom: 5px;
            border-bottom: 1px solid @color-grey-lower;
        }
        .form {
            .single-line {
                padding: 5px 0;
                display: flex;
                > label {
                    flex: 0 0 100px;
                    &::before {
                        margin-right: 5px;
                    }
                }
                > span {
                    flex: 0 0 60px;
                    font-size: 14px;
                    line-height: 26px;
                    &.bank {
                        // color: @color-error;
                    }
                    &.uploaded {
                        color: @color-green;
                    }
                }
                @width: 160px;
                .el-input {
                    width: @width;
                }
                .salary-upload-btn {
                    flex: 0 0 400px;
                    // .el-button {
                    //     width: @width;
                    // }
                    .el-upload-list {
                        display: inline-block;
                        vertical-align: top;
                        .el-upload-list__item {
                            margin-top: 0;
                        }
                    }
                }
                .bank-statement-upload {
                    flex: 1;
                }
            }
        }
    }
}
</style>
